---
import Layout from '../layouts/Layout.astro'
import { Button } from '../components/button.jsx'
import Card from '../components/Card.astro';
import { css } from '../../styled-system/css'
import { circle, hstack } from '../../styled-system/patterns'
---

<Layout title="Welcome to Astro.">
  <main>
    <Button>Welcome</Button>
    <div
      class={css({
        bg: 'green.600',
        padding: '40px',
        color: 'white',
        fontSize: '50px',
      })}
    >
      <div class={hstack({ gap: '10' })}>
        <span> Welcome home</span>
        <span
          class={circle({
            size: '10',
            bg: 'yellow',
            color: 'black',
            fontSize: 'lg',
            fontWeight: 'medium',
          })}>4</span
        >
      </div>
      <Card
				href="https://docs.astro.build/"
				title="Documentation"
				body="Learn how Astro works and explore the official API docs."
				position="Test 12345"
			/>
    </div>
  </main>
</Layout>
